<picture>

主な用途

e.g. webp指定して、ブラウザが未対応ならpngを表示

書き方

code:html

<picture>

<source srcset="候補1の画像URL" 属性 />

<source srcset="候補2の画像URL" 属性 />

<img src="候補4の画像URL" alt="~" />

</picture>

imgは1つのみで最後に書く、sourceは複数可

パターンマッチ的で、より上に書いたものが採用される

属性

src属性

srcset属性

sizes属性

以下は同じ

code:html

sizes="(min-width: 960px) 50vw"

code:html

media="(min-width: 960px)"

sizes="50vw"

media属性

type

なんでもかんでもpictureを使うべきではない

webpがどうのこうのについては言及されてない

参考

わかりやすい